<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :save-api="'/geeker/user/add'"
      row-key="id"
      :detail-api="true"
    >
    </ProTable>
  </div>
</template>
<script lang="tsx" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { getUserList, getUserGender, getUserTreeList } from "@/api/modules/user";
// import ProTable from "@/components/ProTable/index.vue";
import ProTable from "pro-table";
import { rulesForm } from "../../utils/validate";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getUserList(newParams);
};

// 自定义渲染表头（使用tsx语法）
const headerRender = (scope: HeaderRenderScope<User.ResUserList>) => {
  return (
    <el-button type="primary" onClick={() => ElMessage.success("我是通过 tsx 语法渲染的表头")}>
      {scope.column.label}
    </el-button>
  );
};

// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
  { type: "selection", fixed: "left", width: 70 },
  { type: "sort", label: "Sort", width: 80 },
  { type: "expand", label: "Expand", width: 85 },
  {
    prop: "avatar",
    label: "头像",
    edit: {
      el: "el-upload",
      //具体API参考el-upload官网
      props: {
        "list-type": "picture-card",
        "on-change": function (file) {
          console.log(file);
        },
        action: "/api/geeker/file/upload/img"
      }
    },
    isShow: false,
    class: "jz-col-sm-24"
  },
  {
    prop: "username",
    label: "用户姓名",
    search: { el: "el-input", tooltip: "我是搜索提示" },
    render: scope => {
      return (
        <>
          <el-button type="primary" link onClick={() => ElMessage.success("我是通过 tsx 语法渲染的内容")}>
            {scope.row.username}
          </el-button>
        </>
      );
    },
    rule: true
  },
  {
    prop: "gender",
    label: "性别",
    // 字典数据（本地数据）
    // enum: genderType,
    // 字典请求不带参数
    enum: getUserGender,
    // 字典请求携带参数
    // enum: () => getUserGender({ id: 1 }),
    search: { el: "el-select", props: { filterable: true } },
    fieldNames: { label: "genderLabel", value: "genderValue" }
  },
  {
    // 多级 prop
    prop: "user.detail.age",
    label: "年龄",
    search: {
      // 自定义 search 显示内容
      render: ({ searchParam }) => {
        return (
          <div class="flx-center">
            <el-input vModel_trim={searchParam.minAge} placeholder="最小年龄" />
            <span class="mr10 ml10">-</span>
            <el-input vModel_trim={searchParam.maxAge} placeholder="最大年龄" />
          </div>
        );
      }
    },
    edit: false
  },
  {
    prop: "idCard",
    label: "身份证号",
    search: {
      el: "el-input"
    },
    rule: [new rulesForm({ message: "格式不正确！" }).checkIDNumber()]
    //表单验证
  },
  { prop: "email", label: "邮箱" },
  { prop: "address", label: "居住地址" },
  {
    prop: "createTime",
    label: "创建时间",
    headerRender,
    width: 180,
    search: {
      el: "el-date-picker",
      span: 2,
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
      defaultValue: ["2022-11-12 11:35:00", "2022-12-12 11:35:00"]
    },
    edit: false
  },
  {
    prop: "contact",
    label: "联系人",
    edit: {
      el: "Suggest",
      //组件名称
      props: {
        //定义组件内部要使用内容
        props: {
          //自定义下拉搜索组件中数据字段
          label: "username",
          value: "id",
          keyword: "username",
          foreignLabel: "username"
          //修改时，给suggest组装数据时用到的字段，如果没有采用label，如果label也没有，去后台请求数据
        },
        //自定义下拉搜索组件中数据字段
        apiObj: getUserTreeList,
        //数据请求接口
        options: [
          //配置下拉数据显示几列
          {
            prop: "id",
            label: "ID"
          },
          {
            prop: "username",
            //字段名
            label: "用户姓名"
            //别名
          }
        ],
        // multiple:true,//是否是多选，默认单选
        onChange: function (rowData) {
          console.log(rowData);
        }
      }
    },
    isShow: false
  }
]);
</script>
<style scoped></style>
